<template>
  <!-- v-for
     1、用于展示列表数据
     2、语法：v-for="(item, index) of items" :key="index"
     3、可遍历：数组、对象
  -->
  <div class="person">
    <!-- 遍历数组 -->
    <table border="1" cellspacing="0">
      <tr v-for="student of students" :key="student.id">
        <td>{{ student.id }}</td>
        <td>{{ student.name }}</td>
        <td>{{ student.age }}</td>
      </tr>
    </table>
    <br/>
    <table border="1" cellspacing="0">
      <tr v-for="(student, index) of students" :key="index">
        <td>{{ index }}</td>
        <td>{{ student.id }}</td>
        <td>{{ student.name }}</td>
        <td>{{ student.age }}</td>
      </tr>
    </table>
    <!-- 遍历对象 -->
    <ul>
      <li v-for="(value, key, index) of banji">
        {{ index + 1 }}--{{ key }}--{{ value }}
      </li>
    </ul>
    <ul>
      <li v-for="(value, key) of banji">
        {{ key }}--{{ value }}
      </li>
    </ul>

    <!-- 遍历指定次数 -->
    <ul>
      <li v-for="i of 5">
        {{ i }}
      </li>
    </ul>
    <ul>
      <li v-for="(i, index) of 5">
        {{ i }}--{{ index }}
      </li>
    </ul>
  </div>
</template>


<script setup name="Person">
import {reactive, ref} from "vue";

let students = reactive([
  {id: 1, name: '张三1', age: 23},
  {id: 2, name: '张三2', age: 23},
  {id: 3, name: '张三3', age: 23},
])
let banji = reactive({
  id: 1,
  name: 'java230301',
  count: 49
})
</script>

<style scoped>
.person {
  background-color: skyblue;
  box-shadow: 0 0 10px;
  border-radius: 10px;
}

button {
  margin: 0 5px;
}
</style>